<template>
  <div class="max-w-md mx-auto py-12">
    <h2 class="text-2xl font-bold mb-6 text-center">{{ $t('auth.forgot_password') }}</h2>
    
    <form @submit.prevent="handleSubmit" class="space-y-6">
      <div>
        <label class="block text-sm font-medium">{{ $t('email') }}</label>
        <input
          v-model="form.email"
          type="email"
          required
          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
      </div>

      <button
        type="submit"
        :disabled="isSubmitting"
        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:bg-gray-400"
      >
        {{ isSubmitting ? $t('submitting') : $t('auth.reset_password') }}
      </button>

      <div class="mt-4 text-center">
        <NuxtLink
          to="/auth/login"
          class="text-blue-600 hover:text-blue-800 text-sm"
        >
          {{ $t('auth.back_to_login') }}
        </NuxtLink>
      </div>
    </form>
  </div>
</template>

<script setup>
const { t } = useI18n()
const form = reactive({ email: '' })
const isSubmitting = ref(false)
const errorMessage = ref('')
const successMessage = ref('')

const handleSubmit = async () => {
  try {
    isSubmitting.value = true
    const response = await $fetch('/api/auth/forgot-password', {
      method: 'POST',
      body: { email: form.email }
    })

    successMessage.value = t('auth.reset_email_sent')
    errorMessage.value = ''
    form.email = ''
  } catch (error) {
    errorMessage.value = error.data?.statusMessage 
      ? t(`errors.${error.data.statusMessage}`) 
      : t('errors.GENERIC_ERROR')
    successMessage.value = ''
  } finally {
    isSubmitting.value = false
  }
}
</script>